<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
</head>

<body>
    <!-- jsx中html标签必须是按照w3c标准 -->
    <div id="app"></div>
</body>
<script type="text/babel">
    const text = 'Nihao'
    const num = 122

    function fn(obj) {
        return `姓名是${obj.name}`
    }

    let user={
        name:'小明'
    }
    let url="http://www.baidu.com"

    let style={color:'red',backgroundColor:'skyblue'}


    
    let mydom = <div>

   
    
    
        <h1>{text}</h1>
        <span>{num+1}</span>
        <p>{fn(user)}</p>
        <div>{num>100?'很贵':'很便宜'}</div>
        <a href={url}>百度</a>
        <div style={style}>设置样式</div>
        <div className="box">通过类名设置样式</div>
    </div>

    ReactDOM.render(
        mydom,
        document.getElementById('app')
    );



</script>

</html>